<%--
  Created by IntelliJ IDEA.
  User: waqwb
  Date: 2021/12/23
  Time: 14:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--JSTL--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
    <title>当当图书 – 全球最大的中文网上书店</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <%--    相当于把变量赋值给var的变量   --%>
    <c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
    <link href="${ctx}/css/book.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/css/second.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/css/secBook_Show.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/css/list.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/css/book_head090107.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/css/public_footer.css" rel="stylesheet" type="text/css"/>
    <script type="application/javascript" src="${ctx}/js/jquery-3.5.0.min.js"></script>
</head>

<body>

<div style="width: 962px; margin: auto;">
    <a href="#"><img src="${ctx}/images/default/book_banner_081203.jpg" border="0"/> </a>
</div>
<!-- 头部开始 -->
<div class="head_container">
    <div class="head_welcome">
        <div class="head_welcome_right">
            <%--            这个标签的功能类似于if else--%>
            <c:choose>
                <c:when test="${!empty user}">
                     <span class="head_welcome_text">
                        欢迎${user.nickname}
                     </span>
                </c:when>
                <c:otherwise>
                    <span class="head_welcome_text">
                        <span class="little_n">
                            <a href="${ctx}/login.jsp" name="mydangdang" class="head_black12a">登录</a> |
                            <a href="${ctx}/register.jsp" name="helpcenter" class="head_black12a" target="_blank">注册</a> |
                        </span>
				    </span>
                </c:otherwise>
            </c:choose>
            <div class="cart gray4012">
                <a href="cart.jsp">购物车</a>
            </div>
        </div>
    </div>
    <div class="head_head_list">
        <div class="head_head_list_left">
				<span class="head_logo">
                    <a href="#" name="backtobook">
                        <img src="${ctx}/images/booksaleimg/book_logo.gif"/>
					</a>
                </span>
        </div>
        <div class="head_head_list_right">
            <div class="head_head_list_right_b">
            </div>
        </div>
    </div>
</div>
<!-- 头部结束 -->

<div class="book">

    <!--左栏开始-->
    <div id="left" class="book_left">
    </div>
    <!--左栏结束-->

    <!--中栏开始-->
    <div class="book_center">

        <!--图书列表开始-->
        <div id="divRight" class="list_right">

            <div id="book_list" class="list_r_title">
                <div>
                    您现在的位置:&nbsp;
                    <a href="#" style="font-size: 12pt;font-family: sans-serif;color: white">图书热卖场</a>
                </div>
            </div>

            <!--商品条目开始-->
            <div class="list_r_line"></div>
            <div class="clear"></div>
            <%--   TODO 通过jstl的循环，把bookList中的所有图书动态加载出来--%>
            <!-- for (Book book:bookList)-->
            <c:forEach items="${bookList}" var="book">
                <div class="list_r_list">
					<span class="list_r_list_book">
                        <a name="link_prd_img" href='#'>
                            <img title="${book.productName}" class="dang_img"
                                 src='${ctx}/productImages/${book.productPic}'/>
                        </a>
                    </span>
                    <h2>
                        <a name="link_prd_name" href='#'>${book.productName}</a>
                    </h2>
                    <h3>
                        顾客评分：${book.score}
                    </h3>
                    <h4 class="list_r_list_h4">
                        作 者:
                        <a href='#' name='作者'>${book.author}</a>
                    </h4>
                    <h4>
                        出版社：
                        <a href='#' name='出版社'>${book.publishing}</a>
                    </h4>
                    <h4>
                        出版日期：${book.publishTime}
                    </h4>
                    <h5>
                        简介：${book.description}
                    </h5>
                    <div class="clear"></div>
                    <h6>
                        <span class="del">定价：￥${book.fixedPrice}</span>
                        <span class="red">&nbsp;&nbsp;&nbsp;当当价：￥${book.dangPrice}</span>
                        &nbsp;&nbsp;&nbsp;节省：￥${book.fixedPrice-book.dangPrice}
                    </h6>
                    <span class="list_r_list_button">
						<img align="top" src='${ctx}/images/buttom_goumai.gif'
                             onclick="buy(${book.id})"/>
					</span>
                    <span id="cartInfo_1"></span>
                </div>
            </c:forEach>
            <div class="clear"></div>
            <!--商品条目结束-->

            <div class="clear"></div>
            <div id="divBottomPageNavi" class="fanye_bottom">
            </div>

        </div>
        <!--图书列表结束-->

    </div>
    <!--中栏结束-->
    <div class="clear"></div>
</div>

<!--页尾开始 -->

<div class="public_footer">
    <div class="public_footer_bottom">
        <div class="public_footer_icp" style="line-height: 48px;">
            Copyright (C) 当当网 2004-2008, All Rights Reserved
            <a href="#" target="_blank"><img src="${ctx}/images/bottom/validate.gif" border="0" align="middle"/>
            </a>
            <a href="#" target="_blank" style="color: #666;">京ICP证041189号</a>
        </div>
    </div>
</div>
<!--页尾结束 -->
<script type="application/javascript">
    function buy(bookId) {
        //    点击购买的按钮的时候，加入购物车
        $.ajax({
            url: "${ctx}/buyBook",
            type: "post",
            data: {"bookId": bookId},
            success: function (result) {
                alert(result);//弹窗提醒
                console.log(bookId);//在F12控制台输出
                // alert(bookId);
            }
        });
    }

</script>


</body>

</html>
